FORMULARIOS EN HTML

Se utilizan para intercambiar información con el visitante a nuestra página, como:

• Realizar búsquedas
• Introducir datos personales

Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador
del formulario o a un programa encargado de administrarlos automáticamente.

¿QUÉ SE PUEDE HACER CON UN FORMULARIO?

Usando HTML solo podemos construir un formulario con diversos campos y al puslar el botón de enviar, generar un
mensaje de que se ha registrado la información.

Para manejar la información y guardarla, usaremos Java y su conexión a base de datos.

¿COMO HACER UN FORMULARIO EN HTML?

Se definen con la etiqueta <form> y su cierre

Dentro de esta etiqueta "form" debemos especificar algunos atributos:

• action: define el tipo de acción a llevar a cabo con el formulario
• El formulario es enviado a una dirección de correo electrónico mediante
  <form action="ruta del método que va a manejar la información"></form>
• El formulario es enviado a un programa o script que procesa su contenido.
• method: especifica la forma en la que el formulario es enviado mediante los atributos POST y GET.
  Siempre usaremos POST salvo que especifiquemos de otro modo.
• enctype: indica la forma en que viajará la información que se mande por el formulario. Ej. como texto "text/plain" o si el formulario
  contiene una imagen, el atributo debería ser "multipart/form-data"

La etiqueta quedaría de la siguiente manera, por ejemplo:

<form action="ruta del método que va a manejar la información" method="POST" enctype="multipart/form-data">

CAMPOS DE TEXTO

Las etiquetas para crear campos de texto pueden ser de dos tipos:

ETIQUETA INPUT

Las cajas de texto son colocadas por medio de la etiqueta input y los atributos type y name:
<input type="text" name="nombre">

Se ve de la siguiente manera:

ATRIBUTO TYPE

Sirve para especificar el tipo de dato que se va a ingresar en nuestro input:

• NUMBER
<input type="number">




• DATE
<input type="date">




• EMAIL
<input type="email">




• TEXTO OCULTO
<input type="password">

ATRIBUTO NAME

El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento.

ATRIBUTOS PRESCINDIBLES

• size: define el tamaño de la caja de texto, en número de caracteres visibles.
• maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo.
• value: para asignar un valor predeterminado al campo.
• placeholder: especifica una pista que describe el valor esperado para el campo:

ETIQUETA TEXTAREA PARA TEXTO LARGO

Es un campo cuando el contenido a enviar es un comentario, opinión, etc, en los que existe la posibilidad de que el usuario desee rellenar varias lineas

Atributos:

• name: asociar el contenido a un nombre que será asemejado a una variable en un lenguaje de programación.
• rows: define el número de líneas del campo de texto.
• cols: define el número del columnas del campo de texto

Ejemplo: <textarea name="comentario" cols="75" rows="10">Escribe tu comentario...</textarea>

ETIQUETA LABEL

El elemento <label> provee una descripción corta que acompaña al campo de texto que informa al usuario sobre lo que debe ingresar.

También podemos asociar una etiqueta label a un campo para que el usuario pueda acceder al campo de texto al clickear el label. Esto lo hacemos utilizando el atributo for y además en el input vamos a poner el mismo valor, pero en el atributo ID:

<label for="nombre">Nombre del Usuario</label>
<input type="text" id="nombre" name="nombre">

OTROS ELEMENTOS DE FORMULARIOS

En muchos casos, permitir al usuario que escriba cualquier texto permite demasiada libertad y puede que la información que éste escriba no sea la que estamos buscando.

Por eso es conveniente hacer formularios con opciones predefinidas por nosotros, que pueden ser expresadas por diferentes campos de formulario:

• LISTAS DE OPCIONES

Son menús desplegables que construimos mediante la etiqueta select.

Dentro de esta etiqueta definiremos su nombre con el atributo name y cada opción será incluida mediante la etiqueta option

Ejemplo del código:

<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>

En una página se vería así:

Primavera Verano Otoño Invierno


• Atributos etiqueta opción:
• size: indica el número de valores mostrados a la vez en la lista. Si indicamos un valor para este atributo veremos las opciones definidas por size y el resto mediante la barra lateral de desplazamiento
• multiple: permite la selección de más elementos de la lista (manteniendo ctrl):


Primavera Verano Otoño Invierno
• Atributo para la etiqueta option:

selected: este atributo indica que la opción que lo presenta está definida por defecto.

• BOTONES DE RADIO

En este caso obligamos al usuario a elegir únicamente una de las opciones que se le proponen

Usaremos la etiqueta input + el atributo type="radio"

Primavera
Verano
Otoño
Invierno



También podes usar la etiqueta label para que al clickearla se active la caja del input.

• CAJAS DE VALIDACIÓN

Este tipo de elementos pueden ser activados o desactivados por el visitante con un simple click sobre la caja en cuestión.

Usaremos la etiqueta input con el atributo type="checkbox":

Primavera
Verano
Otoño
Invierno

BOTONES

Como hacemos un botón para provocar el envío del formulario, entre otras cosas.

También puede resultar práctico agregar un botón de borrado o acompañar al formulario de datos ocultos que puedan ayudarnos en su procesamiento.

• BOTÓN DE ENVÍO DE FORMULARIO

Para dar por finalizado el proceso de relleno del usuario y hacerlo llegar a su gestor, el usuario ha de enviarlo mediante un botón previsto a tal efecto. Para esto vamos a utilizar el botón <button> y su respectivo cierre. Utilizamos type="submit" para especificar que es un botón de envío. Dentro del elemento se puede poner texto y otras etiquetas. Se vería así:

<button type="submit"> Enviar </button>

Y en la página se vería así:

Enviar


• BOTÓN DE BORRADO

Le permite al usuario borrar todos los datos cargados en el formulario, dejarlo en blanco mediante el atributo type="reset"

Su estructura sintáctica es muy parecida a la del botón anterior:

<button type="reset"> Borrar </button>

• BOTONES NORMALES

Botones pulsables como cualquier otro botón. Por si solos no tienen mucha utilidad pero podemos necesitarlos para realizar otras acciones.

Sintaxis:

<button type="button"> Botón </button>

• DATOS OCULTOS (CAMPOS HIDDEN)

Además de los datos rellenados por el usuario, puede ser útil enviar datos definidos por nosotros mismos que ayuden al programa a procesar el formulario. Estos datos son sobre todo usados por páginas que emplean tecnologías de servidor.

Ejemplo completo de formulario

<form action="ruta del método que va a manejar la información" method="POST" enctype="multipart/form-data"></form> <br>

<label for="nombre1">Nombre del Usuario</label>

<input type="text" id="nombre1" name="nombre1"> <br>

<label>Edad del Usuario</label> <br>

<input type="number" name="edad"> <br>

<label>Fecha de nacimiento del usuario</label> <br>

<input type="date" name="fechaNac"> <br>

<label>Sexo del usuario</label> <br>

<input type="radio" name="sexo value="Hombre"> Hombre <br>

<input type="radio" name="sexo value="Mujer"> Mujer <br>

<label>Pais nacimiento del usuario</label> <br>

<select name="pais">
     <option>Argentina</option>
     <option>Brasil</option>
     <option>Chile</option>
     <option>Uruguay</option>
</select>
<br>

<button type="submit"> Enviar </button>

<button type="reset"> Borrar </button>

Este formulario se verá así: